<template>


  <div class="box">
    <div class="top">
       <div class="center">
                          <!-- 标签 -->
                        <ModelTitle>
                          <template>
                            操作日志
                          </template>
                        </ModelTitle>
  
  
                          <!-- 搜索框 -->
                        <div class="zhanwei">
                          <div style="float:left;margin-left:20px;margin-top:12px;margin-right: 10px;">操作人</div>

                          <el-select style="margin-right:10px" v-model="value1" placeholder="请选择">
                            <el-option
                              v-for="item in options1"
                              :key="item.value1"
                              :label="item.label1"
                              :value="item.value1">
                            </el-option>
                          </el-select>

                          <el-date-picker
                            v-model="value4"
                            format="yyyy/MM/dd"
                            value-format="yyyy/MM/dd"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            style="width: 300px"
                          >
                          </el-date-picker>


                            <!-- 搜索框 -->
                            <el-input style="width:200px;margin-left: 10px;"
                              placeholder="请输入内容"
                              v-model="input2"
                              clearable suffix-icon="ddg">
                            </el-input>

                            <!-- 搜索按钮 -->
                            <i class="el-icon-search sousuo" @click="teamsea"></i>

                            <!-- 导出按钮 -->
                            <el-button style="margin-left:160px" type="primary"   @click="dialogFormVisible = true">导出</el-button>

                  <!-- 表格 -->
                <div>
                <el-table 
                  :data="list.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                  border:none
                  stripe
                  style="width:1110px;margin-top:20px;float: left;">


                    <el-table-column
                      type="selection"  
                      prop="id"
                      width="55">
                    </el-table-column>

                    <el-table-column
                      prop="operator"
                      label="操作人"
                      align="center"
                      :formatter="intorganization1">
                    </el-table-column>

                    <el-table-column
                      prop="data"
                      label="操作时间"
                      width="180"
                      align="center">
                    </el-table-column>

                    <el-table-column
                      prop="ip"
                      label="IP"
                      align="center">
                    </el-table-column>

                    <el-table-column
                      prop="module"
                      label="操作模块"
                      align="center">
                    </el-table-column>

                    <el-table-column
                      prop="particulars"
                      label="操作详情"
                      width="170"
                      align="center">
                    </el-table-column>
                    
                </el-table> 
                </div>  
                
                
                <div  style="width:530px;height:50px;margin-left: 300px;float: left;margin-top: 40px;">
                      <el-pagination
                          align="center"
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="currentPage"
                          :page-sizes="[5, 10, 15, 20]"
                          :page-size="pageSize"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="list.length"
                        >
                        </el-pagination>
                    </div>
                    
                    </div>
  
                    <!-- 新增弹框 -->
                    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                      <el-form-item label="活动名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="活动区域" :label-width="formLabelWidth">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                          <el-option label="区域一" value="shanghai"></el-option>
                          <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogFormVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                    </div>
                  </el-dialog>


  

      </div>
    </div>
  </div>
  
  </template>
  
  <script>
  import axios from 'axios'
import ModelTitle from '@/components/ModelTitle.vue';
  axios.defaults.baseURL="http://localhost:8080"



  export default {
    methods: {


            //操作人
            intorganization1(row, column, cellValue, index) {
                if (cellValue ===1){
                    return '田浩华';
                }else if (cellValue ===2){
                    return '田浩华';
                }else if (cellValue ===3) {
                    return '田浩华';
                }else if(cellValue ===4){
                    return '田浩华';
                }
            },



            //条查
            teamsea(){
              axios({
                url: "/user/getListOperation",
                method: "GET",
                params:{
                  operator:this.value1,
                  module:this.input2,
                  kdata:this.value4[0],
                  jdata:this.value4[1]
                }
              }).then((res) => {
                this.list = res.data; //把值传到list里面
              });
            },

        
             //每页条数改变时触发 选择一页显示多少行
             handleSizeChange(val) {
                //   alert(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
              },
              //当前页改变时触发 跳转其他页
              handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
              },

    },
    data() {
        return {
            dialogFormVisible: false,//新增
            formLabelWidth: "120px",//新增

            //新增表单
            form: {
                name: "",
                region: "",
                date1: "",
                date2: "",
                delivery: false,
                type: [],
                resource: "",
                desc: ""
            },
            
            list:[],    //数据库数据

            value1: "", //条查操作人
            input2: "", //条查操作模块
            value4: "", //条查时间


            //操作人
            options1: [
              {
                value1: "1",
                label1: "张三",
              },
              {
                value1: "2",
                label1: "李四",
              },
              {
                value1: "3",
                label1: "王五",
              },
              {
                value1: "4",
                label1: "王麻子",
              }
            ],
            
            currentPage: 1, // 当前页码
            pageSize: 5, // 每页的数据条数
            
        };
    },
    //查询
    created() {
        this.teamsea();
    },
    components: { ModelTitle }
};
  
  
  </script>
  
  <style>
          *{
              margin: 0;
              padding: 0;
          }
          body{ 
              background: #F2F7FA;
          }
          .box{
              width: 1150px;
              height: 1112px;
              margin: 20px auto;
              background: rgb(192, 192, 192);
              position: relative;
          }
  
          .center{
              background-color: rgba(255, 255, 255, 1);
              width: 1150px;
              height: 1112px;
          }
  
          .zhanwei{
              width: 1150px;
              height: 40px;
  
              float: left;
              margin-top: 50px;
              
          }
  
  </style>
  